<template>
  <!-- 设置router激活vue-router，使用index作为path路由 -->
  <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect" :router="true"
    class="mall-header" background-color="#F7F7F7e0">

    <!-- 左侧内容 -->
    <el-menu-item index="/mall/index" style="font-family: fantasy;">
      🛍️WEBSHOP
    </el-menu-item>

    <div class="flex-grow"></div>

    <!-- 右侧内容 -->
    <!-- 购物车 -->
    <el-menu-item index="/mall/cart">
      🛒购物车
    </el-menu-item>
    <!-- 头像以及下拉内容 -->
    <el-sub-menu index="avatar">
      <template #title>
        <el-avatar :src="avatarUrl" />
      </template>
      <el-menu-item v-if="login === false" index="/login">
        <el-icon>
          <font-awesome-icon :icon="['fas', 'user-check']" />
        </el-icon>
        登录
      </el-menu-item>
      <el-menu-item v-else index="/mall/user_center">
        <el-icon>
          <UserFilled />
        </el-icon>
        个人中心
      </el-menu-item>
      <el-menu-item v-if="role == 0" index="/admin/home">
        <el-icon>
          <font-awesome-icon :icon="['fas', 'umbrella']" />
        </el-icon>
        管理员面板
      </el-menu-item>
      <el-menu-item v-if="role == 2" index="/mall/user_center/stores">
        <el-icon>
          <font-awesome-icon :icon="['fas', 'shop']" />
        </el-icon>
        商店列表
      </el-menu-item>
      <el-sub-menu v-if="login === true" index="2-2">
        <template #title>
          <el-icon>
            <MoreFilled />
          </el-icon>
          更多
        </template>
        <el-menu-item index="2-2-1">收藏夹</el-menu-item>
        <el-menu-item index="2-2-2">足迹</el-menu-item>
        <el-menu-item index="2-2-3">联系客服</el-menu-item>
      </el-sub-menu>
      <el-menu-item v-if="login === true" index="/logout" @click="logout()">
        <el-icon>
          <font-awesome-icon :icon="['fas', 'right-from-bracket']" />
        </el-icon>
        退出
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style lang="less" scoped>
.mall-header {
  // 消除白边
  border: 0;
  backdrop-filter: saturate(180%) blur(10px);
  height: 50px;
  border-bottom: 1px solid rgba(170, 165, 165, 0.651);

  .el-menu-item {
    font-size: 18px;
    font-weight: 550;
  }
}

.flex-grow {
  flex-grow: 1;
}
</style>


<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import img_url_pre from '../utils/img_url_filter';

const router = useRouter();
const activeIndex = ref(router.currentRoute.value.path)
const { proxy } = getCurrentInstance();
const store = useStore()

let login = false;
let role = 1;

let avatarUrl = ref('');

let getImgSrc = async () => {
  proxy.$api.user.getUser(store.state.user.userId).then(ret => {
    if (ret.data.picture)
      avatarUrl.value = img_url_pre(ret.data.picture);
    else
      avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
  }).catch(error => {
    console.log(error);
    avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
  });
}

onMounted(async () => {
  // 获取当前登录状态
  login = store.state.user.userId !== null;
  role = store.state.user.role;
  if (login)
    await getImgSrc();
  else
    avatarUrl.value = new URL("../assets/images/user_default.png", import.meta.url).href;
});

const handleSelect = (key, keyPath) => {
}

// 简单地退出登录
const logout = () => {
  store.commit('user/clearAuth')
  login = false;
  role = 1;
  // router.push('/mall/index');
  location.reload();
}
</script>